// AxiomDatePicker 组件样式
.axiom-date-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;

  // 标签样式
  &__label {
    font-size: var(--axiom-font-size-base);
    font-weight: 500;
    color: var(--axiom-text-color);
    font-family: var(--axiom-font-family-base);
    line-height: 1.4;
    
    // 必填标记
    .axiom-date-picker__required {
      color: var(--axiom-danger-color);
      margin-left: 2px;
    }
  }

  // 日期选择器字段样式
  &__field {
    .el-input__wrapper {
      background-color: var(--axiom-bg-color-secondary) !important;
      border: 1px solid var(--axiom-border-color) !important;
      border-radius: var(--axiom-border-radius-base) !important;
      box-shadow: none !important;
      transition: var(--axiom-transition-base) !important;
      padding: var(--axiom-spacing-sm) var(--axiom-spacing-md) !important;
      
      &:hover {
        border-color: var(--axiom-primary-color) !important;
      }
      
      &.is-focus {
        border-color: var(--axiom-primary-color) !important;
        box-shadow: 0 0 0 2px var(--primary-color-light) !important;
      }
    }
    
    .el-input__inner {
      color: var(--axiom-text-color) !important;
      font-family: var(--axiom-font-family-base) !important;
      font-size: var(--axiom-font-size-base) !important;
      
      &::placeholder {
        color: var(--axiom-text-color-secondary) !important;
      }
    }
    
    // 前缀图标
    .el-input__prefix {
      .el-input__prefix-inner {
        color: var(--axiom-text-color-secondary) !important;
        
        .el-icon {
          font-size: var(--axiom-font-size-large) !important;
        }
      }
    }
    
    // 后缀图标
    .el-input__suffix {
      .el-input__suffix-inner {
        color: var(--axiom-text-color-secondary) !important;
        
        .el-icon {
          font-size: var(--axiom-font-size-large) !important;
          
          &:hover {
            color: var(--axiom-text-color) !important;
          }
        }
      }
    }
    
    // 禁用状态
    &.is-disabled {
      .el-input__wrapper {
        background-color: var(--axiom-bg-color-disabled) !important;
        border-color: var(--axiom-border-color) !important;
        cursor: not-allowed !important;
      }
      
      .el-input__inner {
        color: var(--axiom-text-color-disabled) !important;
        cursor: not-allowed !important;
      }
      
      .el-input__prefix-inner,
      .el-input__suffix-inner {
        color: var(--axiom-text-color-disabled) !important;
      }
    }
    
    // 错误状态
    &--error {
      .el-input__wrapper {
        border-color: var(--axiom-danger-color) !important;
        
        &:hover,
        &.is-focus {
          border-color: var(--axiom-danger-color) !important;
          box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
        }
      }
    }
    
    // 尺寸变体
    &.el-date-editor--large {
      .el-input__wrapper {
        padding: var(--axiom-spacing-md) var(--axiom-spacing-lg) !important;
      }
      
      .el-input__inner {
        font-size: var(--axiom-font-size-large) !important;
      }
    }
    
    &.el-date-editor--small {
      .el-input__wrapper {
        padding: 6px var(--axiom-spacing-sm) !important;
      }
      
      .el-input__inner {
        font-size: var(--axiom-font-size-small) !important;
      }
    }
  }

  // 错误信息样式
  &__error {
    font-size: var(--axiom-font-size-small);
    color: var(--axiom-danger-color);
    font-family: var(--axiom-font-family-base);
    line-height: 1.4;
    margin-top: 2px;
  }

  // 帮助文本样式
  &__help {
    font-size: var(--axiom-font-size-small);
    color: var(--axiom-text-color-secondary);
    font-family: var(--axiom-font-family-base);
    line-height: 1.4;
    margin-top: 2px;
  }
}

// 日期选择器弹出面板样式（全局）
.el-picker-panel {
  background-color: var(--axiom-bg-color-secondary) !important;
  border: 1px solid var(--axiom-border-color) !important;
  border-radius: var(--axiom-border-radius-large) !important;
  box-shadow: var(--axiom-box-shadow-base) !important;
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  z-index: var(--z-index-modal, 1050) !important;
  
  // 头部
  .el-picker-panel__header {
    border-bottom: 1px solid var(--axiom-border-color) !important;
    
    .el-picker-panel__icon-btn {
      color: var(--axiom-text-color-secondary) !important;
      
      &:hover {
        color: var(--axiom-primary-color) !important;
      }
    }
  }
  
  // 内容区域
  .el-picker-panel__content {
    color: var(--axiom-text-color) !important;
  }
  
  // 日期表格
  .el-date-table {
    th {
      color: var(--axiom-text-color-secondary) !important;
      font-family: var(--axiom-font-family-base) !important;
      border-bottom: 1px solid var(--axiom-border-color) !important;
    }
    
    td {
      &.available {
        color: var(--axiom-text-color) !important;
        
        &:hover {
          background-color: var(--primary-color-light) !important;
          color: var(--axiom-primary-color) !important;
        }
      }
      
      &.today {
        color: var(--axiom-primary-color) !important;
        font-weight: 600 !important;
      }
      
      &.current {
        background-color: var(--axiom-primary-color) !important;
        color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse)) !important;
      }
      
      &.disabled {
        color: var(--axiom-text-color-disabled) !important;
        background-color: var(--axiom-bg-color-disabled) !important;
      }
      
      &.in-range {
        background-color: var(--primary-color-light) !important;
      }
      
      &.start-date,
      &.end-date {
        background-color: var(--axiom-primary-color) !important;
        color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse)) !important;
      }
    }
  }
  
  // 月份/年份表格
  .el-month-table,
  .el-year-table {
    td {
      color: var(--axiom-text-color) !important;
      
      &:hover {
        background-color: var(--primary-color-light) !important;
        color: var(--axiom-primary-color) !important;
      }
      
      &.today {
        color: var(--axiom-primary-color) !important;
        font-weight: 600 !important;
      }
      
      &.current {
        background-color: var(--axiom-primary-color) !important;
        color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse)) !important;
      }
      
      &.disabled {
        color: var(--axiom-text-color-disabled) !important;
      }
    }
  }
  
  // 时间选择器
  .el-time-panel {
    background-color: var(--axiom-bg-color-secondary) !important;
    border-right: 1px solid var(--axiom-border-color) !important;
    
    .el-time-spinner__item {
      color: var(--axiom-text-color) !important;
      
      &:hover {
        background-color: var(--primary-color-light) !important;
      }
      
      &.is-active {
        background-color: var(--axiom-primary-color) !important;
        color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse)) !important;
      }
      
      &.is-disabled {
        color: var(--axiom-text-color-disabled) !important;
      }
    }
  }
  
  // 快捷选项
  .el-picker-panel__sidebar {
    background-color: var(--axiom-bg-color) !important;
    border-right: 1px solid var(--axiom-border-color) !important;
    
    .el-picker-panel__shortcut {
      color: var(--axiom-text-color) !important;
      font-family: var(--axiom-font-family-base) !important;
      
      &:hover {
        background-color: var(--primary-color-light) !important;
        color: var(--axiom-primary-color) !important;
      }
    }
  }
  
  // 底部按钮
  .el-picker-panel__footer {
    border-top: 1px solid var(--axiom-border-color) !important;
    
    .el-button {
      background-color: transparent !important;
      border-color: var(--axiom-border-color) !important;
      color: var(--axiom-text-color) !important;
      
      &:hover {
        border-color: var(--axiom-primary-color) !important;
        color: var(--axiom-primary-color) !important;
      }
      
      &.el-button--primary {
        background-color: var(--axiom-primary-color) !important;
        border-color: var(--axiom-primary-color) !important;
        color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse)) !important;
        
        &:hover {
          background-color: var(--axiom-primary-color) !important;
          opacity: 0.8;
        }
      }
    }
  }
}

// 日期范围选择器特殊样式
.el-date-range-picker {
  .el-picker-panel__body {
    display: flex;
    
    .el-picker-panel__content {
      &:first-child {
        border-right: 1px solid var(--axiom-border-color) !important;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .el-picker-panel {
    width: 100% !important;
    max-width: 320px !important;
  }
  
  .el-date-range-picker {
    .el-picker-panel__body {
      flex-direction: column;
      
      .el-picker-panel__content {
        &:first-child {
          border-right: none !important;
          border-bottom: 1px solid var(--axiom-border-color) !important;
        }
      }
    }
  }
}